<template>
  <div>
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='search' v-ref:criteria>
        <div novalidate class="form-inline auto" partial>
          <div class="form-group">
            <!-- 用户名: -->
            <input type="text" class="form-control" v-model="model.f_user_name"
             placeholder='用户名' v-on:keyup.enter="search">
            <!-- 用户编号: -->
          </div>
          <div class="form-group">
            <input type="text" class="form-control" v-model="model.f_user_id"
            placeholder='用户编号' v-on:keyup.enter="search">
          <!-- 用户类型: -->
          </div>
          <div class="form-group">
            <v-select id="f_subcompany"
              placeholder='用户类型'
              :value.sync="$parent.$parent.f_user_type"
              :options='$parent.$parent.user_type'
              v-on:keyup.enter="search"
              close-on-select clear-button>
            </v-select>
          </div>
          <!-- 小区: -->
          <div class="form-group">
            <input type="text" class="form-control" v-model="model.f_residential_area"
            placeholder='小区'
            v-on:keyup.enter="search">
          </div>
          <div class="form-group">
            <button class="btn btn-success width-80" @click="search()">
              <span class="glyphicon glyphicon-search"></span>查询
            </button>
          </div>
          <div class="form-group">
            <button class="btn btn-success width-80" @click="$parent.$parent.add()">
              增加
            </button>
          </div>
          <div class="form-group">
            &nbsp;&nbsp;<span class="glyphicon glyphicon-search">选择导入文件：</span><file-uploader title="点击选择导入文件" accept=".xls,.xlsx" post-action="rs/db/importExcel" v-ref:loader></file-uploader>&nbsp;&nbsp;
            <button class="btn btn-success width-80" @click="$parent.$parent.import" :disabled="$parent.$parent.disableUpload">
              导入
            </button>
          </div>
        </div>
      </criteria>
      <data-grid :model="model" partial='list' v-ref:grid>
        <template partial='head'>
          <tr>
            <th>用户编号</th>
            <th>用户姓名</th>
            <th>用户电话</th>
            <th>用户类型</th>
            <th>详细地址</th>
            <th>所属分公司</th>
            <th>最后安检日期</th>
            <th>最后安检状态</th>
            <th>安检负责人</th>
            <th>修改</th>
            <th>删除</th>
           </tr>
        </template>
        <template partial='body'>
          <td>{{row.f_user_id}}</td>
          <td>{{row.f_user_name}}</td>
          <td>{{row.f_user_phone}}</td>
          <td>{{row.f_user_type}}</td>
          <td>{{row.f_address}}</td>
          <td>{{row.f_subcompany}}</td>
          <td>{{row.f_last_check_date}}</td>
          <td>{{row.f_last_check_state}}</td>
          <td>{{row.f_checker}}</td>
          <td class="nopadding">
            <a   @click='$parent.$parent.$parent.change(row)'>修改</a>
          </td>
          <td class="nopadding">
            <a   @click='$parent.$parent.$parent.del(row, $index)'>删除</a>
          </td>
        </template>
      </data-grid>
    </criteria-paged>
  </div>
</template>

<script>
import { PagedList } from 'vue-client'
import AppData from '../../stores/AppData'

export default {
  title: '用户基本档案',
  props: ['f'],
  data () {
    return {
      model: new PagedList('rs/sql/getuser', 20, {f_user_name: 'this.model.f_user_name',
      f_user_type: 'this.f_user_type[0]', f_user_id: 'this.model.f_user_id',
      f_residential_area: 'this.model.f_residential_area'}),
      f_user_type: [''],
      disableUpload: true
    }
  },
  events: {
    addFileUpload (e) {
      this.$refs.paged.$refs.criteria.$refs.loader.active = false
      this.$refs.paged.$refs.criteria.$refs.loader.title = e.name
      this.disableUpload = false
    },
    fileUploadProgress(file, component) {
      this.disableUpload = true
      if(file.progress > 99)
        this.$refs.paged.$refs.criteria.$refs.loader.title = '正在导入，请耐心等待......'
      else
        this.$refs.paged.$refs.criteria.$refs.loader.title = '上传文件:' + file.progress + '%'
    },
    afterFileUpload(file, component) {
      this.$refs.paged.$refs.criteria.$refs.loader.title = '点击选择导入文件'
      let result = JSON.parse(file.data)
      if(result.code == 200)
        window.alert('导入成功！')
      else
        window.alert(result.result)
    }
  },
  computed: {
    user_type () {
      return [{label: '全部', value: ''}, ...AppData.getParam('用户类型')]
    }
  },
  methods: {
    import () {
      if(this.$refs.paged.$refs.criteria.$refs.loader.files.length == 0) {
        window.alert('请选择一个导入文件')
        return
      }
       this.$refs.paged.$refs.criteria.$refs.loader.active = true
    },
    change (row) {
      this.$goto('userfileschange', {f: this.f, row: row, flag: 1}, 'self', this.callback)
    },
    add () {
      this.$goto('userfileschange', {f: this.f, flag: 0}, 'self', this.callback)
    },
    del (row, index) {
      this.$post('rs/logic/人工录入删除', {data: row}, {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        this.model.rows.splice(index, 1)
      })
      console.log('index', index)

      this.model.search('1=1', {f_user_name: this.model.model.f_user_name,
    f_user_type: this.f_user_type[0], f_user_id: this.model.model.f_user_id,
    f_residential_area: this.model.model.f_residential_area})
    },

    callback () {
      this.model.search('1=1', {f_user_name: this.model.model.f_user_name,
    f_user_type: this.f_user_type[0], f_user_id: this.model.model.f_user_id,
    f_residential_area: this.model.model.f_residential_area})
    }
  },
  ready () {
    this.model.f_user_type = this.f_user_type
    this.$watch('f_user_type', function (val) {
      this.model.f_user_type = val
    })
  }
}
</script>
